{% extends 'layout.html' %}
{% block content %}
<div class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-heading"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询条件</div>
        <form class="form-inline">
            <div class="panel-body">
                <div class="form-group">
                    <label for="jsyf">　1.结算月份</label>
                    {{select_jsyf}}
                </div>
                <div class="form-group">
                    <label for="sqrgh">　&nbsp;2.申请人岗号%</label>
                    <input type="text" class="form-control" id="sqrgh" name="sqrgh" value="{{sqrgh}}">
                </div>
                <div class="form-group">
                    <label for="sqrxm">　&nbsp;3.申请人姓名</label>
                    <input type="text" class="form-control" id="sqrxm" name="sqrxm" value="{{sqrxm}}">
                </div>
                <div class="form-group">
                    <label for="wllx">　&nbsp;4.物料类型</label>
                    {{select_wllx}}
                </div>
                <div class="form-group">
                    <label for="fylb">　&nbsp;5.费用类别</label>
                    {{select_fylb}}
                </div>
                <div class="form-group">
                    <span>　</span>
                    <input type="hidden" name="page" value="{{page_1.number}}">
                    <input type="hidden" name="pagesize" value="{{page_1.paginator.per_page}}">
                    <input type="submit" class="btn btn-sm btn-primary" style="float: right;margin-top: -5px"
                           value="查询">
                </div>
            </div>
        </form>
    </div>
    <div class="panel panel-default table-responsive">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>物料领用点检员汇总统计
        </div>

        <!--        bootstrap-table-->
<!--        <table id="table"></table>-->

        <table class="table text-nowrap table-striped table-bordered table-hover" style="">
            <thead>
            <tr style="background-color: #5B9BD5;color: white">
                <th>申请人岗号</th>
                <th>申请人姓名</th>
                <th>汇总金额</th>
            </tr>
            </thead>
            <tbody>
            {% for row in page_1.object_list %}
            <tr>
                <td style="text-align: center">{{ row.申请人岗号 }}</td>
                <td style="text-align: center">{{ row.申请人姓名 }}</td>
                <td style="text-align: right">{{ row.金额 }}</td>
            </tr>
            {% endfor %}
            <tr style="background-color: yellow">
                <td>合计</td>
                <td style="text-align: right">{{ sum_row.申请人姓名__count }}<br>{{ sum_all.申请人姓名__count }}</td>
                <td style="text-align: right">{{ sum_row.金额__sum }}<br>{{ sum_all.金额__sum }}</td>
            </tr>
            </tbody>
        </table>

        <!--    分页    -->
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page_1.has_other_pages %}
                {% if page_1.has_previous %}
                <li>
                    <a href="?page=1&pagesize={{page_1.paginator.per_page}}&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">首页</a>
                </li>
                <li>
                    <a href="?page={{page_1.previous_page_number}}&pagesize={{page_1.paginator.per_page}}&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">上一页</a>
                </li>
                {%endif%}
                <li><span>第&nbsp;{{page_1.number}}&nbsp;/&nbsp;{{ page_1.paginator.num_pages }}&nbsp;页</span></li>
                {% if page_1.has_next %}
                <li>
                    <a href="?page={{page_1.next_page_number}}&pagesize={{page_1.paginator.per_page}}&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">下一页</a>
                </li>
                <li>
                    <a href="?page={{page_1.paginator.num_pages}}&pagesize={{page_1.paginator.per_page}}&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">尾页</a>
                </li>
                {% endif %}
                {% else %}
                <li><span>第&nbsp;1&nbsp;/&nbsp;1&nbsp;页</span></li>
                {% endif %}
                <div class="dropup btn-group"> <!-- dropup 上拉框 -->
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        {{page_1.paginator.per_page}} 条 <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=10&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">10
                                条</a></li>
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=20&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">20
                                条</a></li>
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=50&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">50
                                条</a></li>
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=100&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">100
                                条</a></li>
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=500&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">500
                                条</a></li>
                        <li>
                            <a href="?page={{page_1.number}}&pagesize=1000&jsyf={{jsyf}}&wllx={{wllx}}&fylb={{fylb}}&gwh={{gwh}}&wldm={{wldm}}&xmh={{xmh}}">1000
                                条</a></li>
                    </ul>
                </div>

            </ul>
        </nav>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        load('/receive/table/list/')
    });

    function load(url) {
        $('#table').bootstrapTable({
            url: url,  // 请求数据源的路由
            dataType: "json",
            method: 'post',
            pagination: true, //前端处理分页
            singleSelect: false,//是否只能单选
            search: false, //显示搜索框，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageNumber: 1, //初始化加载第10页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
            strictSearch: true,//设置为 true启用 全匹配搜索，false为模糊搜索
            showColumns: false, //显示内容列下拉框
            showRefresh: false, //显示刷新按钮
            minimumCountColumns: 2, //当列数小于此值时，将隐藏内容列下拉框
            clickToSelect: true, //设置true， 将在点击某行时，自动勾选rediobox 和 checkbox
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            queryParamsType: "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的
                var data = {
                    size: params.limit,                             //页面大小
                    current: (params.offset / params.limit) + 1,    //页码
                    content: $('#input').val(),
                    condition: $('#select').val(),
                    table_name: 'Book',
                };
                return data;
            },
            responseHandler: function (res) {
                //如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式
                return res;
            },
            columns: [
                {
                    field: '申请人岗号',
                    title: '申请人岗号',
                    align: 'center',  //对齐方式，居中
                }, {
                    field: '申请人姓名',
                    title: '申请人姓名',
                    align: 'center'
                }, {
                    field: '金额__sum',
                    title: '金额__sum',
                    align: 'right'
                }],
        });
    }

    function search() {
        $('#table').bootstrapTable('destroy');
        load('/query/');
    }

    function reset() {
        $('#table').bootstrapTable('destroy');
        $("#select").val("");
        $("#input").val("");
        load('receive/table/list/');
    }
</script>
{% endblock %}

{% block js %}

{% endblock %}